<template>
  <div class="container">
    <el-backtop :right="100" :bottom="100" />
    <div>
      <el-carousel height="700px"  :autoplay="true">
        <el-carousel-item v-for="item in sliderUrl" :key="item">
          <el-image :src="item" fit="cover" style="height:100%;width:100%"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- <div class="home">
      <el-row>
        <el-col :span="10" class="pubTitle">
          <div class="grid-content bg-purple txt">最新图情</div>
        </el-col>
        <el-col :span="14" class="pubTitle">
          <div class="grid-content bg-purple-light txt">新闻</div>
        </el-col>
      </el-row>
      <div style="display: flex">
        
        <div style="width: 40%">
          <el-carousel :interval="50000">
            <el-carousel-item v-for="(item, index) in pictures" :key="index">
              <img
                src="../assets/images/test01.png"
                style="height: 100%; width: 100%"
              />
            </el-carousel-item>
          </el-carousel>
        </div>
       
        <div class="message">
          <el-card class="box-card" shadow="hover">
            <div class="detail" v-for="(item, index) in details" :key="index">
              <a
                class="detaillink"
                :href="item.url"
                target="_blank"
                :title="item.title"
                >{{ item.title }}</a
              >
              <div :title="item.date">{{ item.date }}</div>
            </div>
          </el-card>
          <el-card class="box-card" shadow="hover">
            <div class="detail" v-for="(item, index) in details" :key="index">
              <a class="detaillink" :href="item.url" target="_blank">{{
                item.title
              }}</a>
              <span>{{ item.date }}</span>
            </div>
          </el-card>
        </div>
      </div>
    
      <div>
        <img
          src="../assets/images/test01.png"
          style="height: 350px; width: 524px"
        />
      </div> -->
    <!-- 类似的轮播图以卡片样式展示出来，每次两个：可以选择展示技术人员|新加入老师  后面再做轮播效果的升级-->
    <!-- <div class="figureswipper">
        <a class="employeeCard" href="https://www.baidu.com">
          <div class="employeeCard-avatar">
            <img src="../assets/images/figer.png" />
          </div>
          <div class="employeeCard-name">从大学老师到算法工程师</div>
          <div class="employeeCard-title">
            <div>
              唐堂
              <span>I</span>
              物联网 FPG
            </div>
          </div>
          <div class="employeeCard-description">
            怀着一颗想出来闯荡的心，从学术界跳到了工业界；公司有着丰富的应用场景和海量数据资源，技术落地非常有保证。
          </div>
          <div class="animate employeeCard-more slideUpIn300">
            <svg
              class="arrow-more_svg__icon"
              viewBox="0 0 1450 1024"
              width="32"
              height="32"
            >
              <path
                fill="currentColor"
                d="M1390.933 546.133L972.8 964.267c-17.067 17.066-51.2 17.066-68.267 0L896 955.733c-17.067-17.066-17.067-51.2 0-68.266l324.267-332.8H76.8c-25.6 0-42.667-17.067-42.667-42.667v-8.533c0-25.6 17.067-42.667 42.667-42.667h1160.533L896 119.467c-17.067-17.067-17.067-51.2 0-68.267l8.533-8.533c17.067-17.067 51.2-17.067 68.267 0L1390.933 460.8c8.534 8.533 8.534 17.067 17.067 25.6v8.533c0 34.134-8.533 42.667-17.067 51.2z"
              ></path>
            </svg>
          </div>
        </a>
        <a class="employeeCard" href="https://www.baidu.com">
          <div class="employeeCard-avatar">
            <img src="../assets/images/figer.png" />
          </div>
          <div class="employeeCard-name">从大学老师到算法工程师</div>
          <div class="employeeCard-title">
            <div>
              唐堂
              <span>I</span>
              物联网 FPG
            </div>
          </div>
          <div class="employeeCard-description">
            怀着一颗想出来闯荡的心，从学术界跳到了工业界；公司有着丰富的应用场景和海量数据资源，技术落地非常有保证。
          </div>
          <div class="animate employeeCard-more slideUpIn300">
            <svg
              class="arrow-more_svg__icon"
              viewBox="0 0 1450 1024"
              width="32"
              height="32"
            >
              <path
                fill="currentColor"
                d="M1390.933 546.133L972.8 964.267c-17.067 17.066-51.2 17.066-68.267 0L896 955.733c-17.067-17.066-17.067-51.2 0-68.266l324.267-332.8H76.8c-25.6 0-42.667-17.067-42.667-42.667v-8.533c0-25.6 17.067-42.667 42.667-42.667h1160.533L896 119.467c-17.067-17.067-17.067-51.2 0-68.267l8.533-8.533c17.067-17.067 51.2-17.067 68.267 0L1390.933 460.8c8.534 8.533 8.534 17.067 17.067 25.6v8.533c0 34.134-8.533 42.667-17.067 51.2z"
              ></path>
            </svg>
          </div>
        </a>
        <a class="employeeCard" href="https://www.baidu.com">
          <div class="employeeCard-avatar">
            <img src="../assets/images/figer.png" />
          </div>
          <div class="employeeCard-name">从大学老师到算法工程师</div>
          <div class="employeeCard-title">
            <div>
              唐堂
              <span>I</span>
              物联网 FPG
            </div>
          </div>
          <div class="employeeCard-description">
            怀着一颗想出来闯荡的心，从学术界跳到了工业界；公司有着丰富的应用场景和海量数据资源，技术落地非常有保证。
          </div>
          <div class="animate employeeCard-more slideUpIn300">
            <svg
              class="arrow-more_svg__icon"
              viewBox="0 0 1450 1024"
              width="32"
              height="32"
            >
              <path
                fill="currentColor"
                d="M1390.933 546.133L972.8 964.267c-17.067 17.066-51.2 17.066-68.267 0L896 955.733c-17.067-17.066-17.067-51.2 0-68.266l324.267-332.8H76.8c-25.6 0-42.667-17.067-42.667-42.667v-8.533c0-25.6 17.067-42.667 42.667-42.667h1160.533L896 119.467c-17.067-17.067-17.067-51.2 0-68.267l8.533-8.533c17.067-17.067 51.2-17.067 68.267 0L1390.933 460.8c8.534 8.533 8.534 17.067 17.067 25.6v8.533c0 34.134-8.533 42.667-17.067 51.2z"
              ></path>
            </svg>
          </div>
        </a>
      </div> 
    </div>-->
  </div>
</template>

<script>
// @ is an alias to /src
import { login } from "../api/user.js";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      form: {
        tel: "13251147616",
        password: "123456",
      },
      pictures: [
        {
          text: "",
          imagUrl: "../assets/images/test01.png",
        },
        {
          text: "",
          imagUrl:
            "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
        },
        {
          text: "",
          imagUrl:
            "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
        },
        {
          text: "",
          imagUrl:
            "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
        },
      ],
      currentDate: new Date(),
      details: [
        {
          title: "首届重庆市数学拔尖人才基地班在我校顺利开班",
          url: "https://news.cqjtu.edu.cn/info/1081/46231.htm",
          date: "04-22",
        },
      ],
      sliderUrl: [
        "https://cqjtu-education.oss-cn-beijing.aliyuncs.com/course_cover/a.jpg",
        "https://cqjtu-education.oss-cn-beijing.aliyuncs.com/course_cover/b.jpg",
        "https://cqjtu-education.oss-cn-beijing.aliyuncs.com/course_cover/c.jpg",
        "https://cqjtu-education.oss-cn-beijing.aliyuncs.com/course_cover/d.jpg",
      ],
    };
  },
  mounted() {
    // this.$store.commit("changeIsOnline")
  },
  computed: {},
  methods: {
    log() {
      login().then((res) => {
        let token = res.data.token;
        window.sessionStorage.setItem("token", token);
      });
    },
    test() {
      // this.$store.dispatch("refreshUserMessage")
      let user = this.$store.getters.getShowDetail;
      console.log("获取部分用户信息");
      console.log(user);
    },
  },
};
</script>

<style scoped>
.detail :hover {
  color: #3370ff;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.container {
  /* 预留背景样式设计 */
  height: 700px;
}
.txt {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  margin-left: 0;
  padding-left: 0px;
}
.pubTitle .txt::before {
  display: block;
  width: 8px;
  height: 25px;
  background: #c8020b;
  content: "";
}
.message {
  display: flex;
  width: 60%;
  height: 300px;
}
.box-card {
  width: 50%;
}
.detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 30px;
  font-size: 5px;
  border-bottom: 1px dashed #000;
}
.detaillink {
  display: block;
  width: 250px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-decoration: none;
  color: rgb(96, 98, 102);
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
}
.detail:first-of-type::before {
  /* 这里使用element-plus中的标签用作标签警示 */
  display: block;
  width: 8px;
  height: 25px;
  background: #c8020b;
  content: "";
}
.figureswipper {
  display: flex;
  justify-content: center;
  margin-bottom: 72px;
  margin-top: 80px;
}
.employeeCard {
  width: 384px;
  padding: 40px 60px 27px;
  margin: 0 24px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  background: #fff;
}
.employeeCard-avatar {
  width: 216px;
  height: 216px;
  margin-bottom: 32px;
}
.employeeCard-name {
  margin-bottom: 8px;
  line-height: 36px;
  font-size: 22px;
  color: #1f2329;
  height: 36px;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  animation-name: slideUpIn100;
}
.employeeCard-title {
  margin-bottom: 12px;
  line-height: 22px;
  font-size: 14px;
  color: #1f2329;
}
.employeeCard-description {
  text-align: left;
  width: 100%;
  margin-bottom: 24px;
  line-height: 22px;
  font-size: 14px;
  color: #646a73;
  overflow: hidden;
}
.el-carousel__item div {
  color: #475669;
  opacity: 0.75;
  line-height: 500px;
  margin: 0;
  text-align: center;
}

/* .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
} */
</style>
